// 1.创建UI组件
// 2.创建model
// 3.将UI组件和model建立连接

import React from 'react'
// 引入connect，用于绑定数据到组件
import { connect } from 'umi'
import { Button } from 'antd';

const Dva = (props: any) => {

  // console.log("props: ", props)

  const { dispatch } = props
  // console.log("dva: ", props.dva)
  const list = props.dva.tags.tagsList.list || []
  console.log("tagsList: ", list)

  const getData = () => {
    // 使用model，获取数据
    dispatch({
      type: "tags/fetchTags", // model文件的命名空间/effects方法
      payload: null // 传送给model方法的payload参数
    })
  }

  return (
    <div>
      <h3>Dva的使用</h3>
      <Button onClick={getData}>获取列表数据</Button>
      <hr />
      {
        list.map((item: any, index: number) => {
          return <p key={index}>{item.name}</p>
        })
      }
    </div>
  )
}

export default connect((dva) => ({ dva }))(Dva)
